@use "../../variables" as *;

// Element Plus dropdown 基础样式
body {
  .el-dropdown {
    .el-tooltip__trigger {
      &:focus-visible {
        outline: none;
      }
    }
  }
  
  .el-dropdown__popper {
    --el-dropdown-menuItem-hover-fill: #{$qf-color-bg5};
  }
  
  // 确保CSS变量在teleport的下拉框中可用
  .el-select-dropdown {
    --qf-bg-color-secondary: #{$qf-bg-color-secondary};
    --qf-border-color: #{$qf-border-color};
    --qf-text-color: #{$qf-text-color};
    --qf-text-color-secondary: #{$qf-text-color-secondary};
    --qf-primary: #{$qf-primary};
    --qf-color-bg5: #{$qf-color-bg5};
    --qf-color-success: #{$qf-color-success};
  }
}

// Element Plus select dropdown 样式优化
// 使用更强的选择器优先级来覆盖teleport渲染的样式
body .el-select-dropdown,
.el-popper.is-light .el-select-dropdown,
.el-select-dropdown {
  background-color: $qf-bg-color-secondary !important;
  border: 1px solid $qf-border-color !important;
  border-radius: $qf-border-radius-base !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  
  .el-select-dropdown__item {
    background-color: transparent !important;
    color: $qf-text-color !important;
    padding: 12px 16px !important;
    min-height: 56px !important;
    
    &:hover {
      background-color: $qf-color-bg5 !important;
      transition: all 0.2s ease !important;
      
      .role-option {
        .role-icon {
          transform: scale(1.05) !important;
          transition: transform 0.2s ease !important;
        }
        
        .role-info {
          .role-name {
            color: $qf-text-color !important;
          }
        }
      }
    }
    
    &.is-selected {
      background-color: $qf-primary !important;
      color: white !important;
      position: relative !important;
      
      &::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 3px !important;
        background-color: rgba(255, 255, 255, 0.8) !important;
      }
      
      .role-option {
        .role-icon {
          color: white !important;
          transform: scale(1.1) !important;
          
          &.editor,
          &.viewer {
            color: white !important;
          }
        }
        
        .role-info {
          .role-name {
            color: white !important;
            font-weight: 600 !important;
          }
          
          .role-desc {
            color: rgba(255, 255, 255, 0.8) !important;
          }
        }
      }
    }
    
    &.is-disabled {
      color: $qf-text-color-disabled !important;
      background-color: transparent !important;
    }
    
    // 自定义角色选项样式
    .role-option {
      display: flex !important;
      align-items: flex-start !important;
      gap: 12px !important;
      padding: 4px 0 !important;
      width: 100% !important;
      min-height: 40px !important;
      
      .role-icon {
        font-size: 18px !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
        width: 18px !important;
        height: 18px !important;
        margin-top: 2px !important;
        
        &.editor {
          color: $qf-color-success !important;
        }
        
        &.viewer {
          color: $qf-primary !important;
        }
      }
      
      .role-info {
        flex: 1 !important;
        min-width: 0 !important;
        
        .role-name {
          font-size: $qf-font-size-base !important;
          color: $qf-text-color !important;
          font-weight: 500 !important;
          margin-bottom: 4px !important;
          line-height: 1.3 !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }
        
        .role-desc {
          font-size: $qf-font-size-small !important;
          color: $qf-text-color-secondary !important;
          line-height: 1.3 !important;
          margin: 0 !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
        }
      }
    }
    
    &.is-disabled {
      background-color: transparent !important;
      cursor: not-allowed !important;
      opacity: 0.5 !important;
      
      .role-option {
        pointer-events: none !important;
        
        .role-icon {
          color: $qf-text-color-disabled !important;
          transform: none !important;
        }
        
        .role-info {
          .role-name {
            color: $qf-text-color-disabled !important;
          }
          
          .role-desc {
            color: $qf-text-color-disabled !important;
          }
        }
      }
      
      &:hover {
        background-color: transparent !important;
        
        .role-option {
          .role-icon {
            transform: none !important;
          }
        }
      }
    }
  }
  
  .el-select-dropdown__empty {
    color: $qf-text-color-secondary !important;
  }
}